<template>
    <div class="index">
        <div class="detail">
            <h2>收货单详情</h2>
            <el-descriptions title="" :column="3" :border='true' class="tab" :contentStyle="CS">
                <el-descriptions-item label="名称">{{ result.name }}</el-descriptions-item>
                <el-descriptions-item label="源单据"><a @click="alertSupplier">{{ result.origin }}</a></el-descriptions-item>
                <el-descriptions-item label="预定交货日期">{{ result.scheduledDate }}</el-descriptions-item>
                <el-descriptions-item label="业务伙伴"><a @click="alertSupplier">{{ result.partnerName }}</a></el-descriptions-item>
                
                <!-- <el-descriptions-item label="采购订单编号">{{ result.companyId }}</el-descriptions-item> -->

                
                <!-- <el-descriptions-item label="欠单">{{ result.backorderId }}</el-descriptions-item> -->
            </el-descriptions>


        </div>
        <div class="product">
            <h2>收货明细</h2>
            <!-- <div class="btn">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addReorder">新增重订货规则</el-button>
            </div> -->
            <el-form :model="tableForm" ref="tableForm" >
            <el-table :data="tableForm.tableData" style="width: 90%; margin: 5px auto 30px;" border
            :header-cell-style="{'text-align':'center' }"
             :cell-style="{'text-align':'center'}">
                <el-table-column prop="name" label="产品名称">
                    <template slot-scope="scope">
                        <div @click="stockdetail(scope.row)">
                            <a href="javascript:;">{{ scope.row.name }}</a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="orderedQty" label="订单数量">
                </el-table-column>
                <el-table-column prop="productQty" label="实际库存">
                </el-table-column>
                <el-table-column prop="num" label="收货数量" :render-header="req">
                    <template slot-scope="scope">
                                <el-form-item :prop=" 'tableData.' + scope.$index + '.num' " :rules="rules.num">
                                    <el-input class="thRed" v-model="scope.row.num" />
                                </el-form-item>
                            </template>
                </el-table-column>
                <el-table-column prop="note" label="备注">
                </el-table-column>
                <!-- <el-table-column label="设置收货数量" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="Shipment(scope.row)"
                            v-hasPermi="['system:stock:edit']">收货</el-button>
                        
                    </template>
                </el-table-column> -->

            </el-table>
        </el-form> 
        <div class="sub">
        <el-button type="primary" @click="submit" style="width:150px" >提交</el-button>
        </div>
        </div>
        <!-- 库存详情弹框 -->
     <div v-if="showStockCD">
        <el-dialog :visible.sync="openStock" width="1500px" append-to-body :destroy-on-colse="true" @close='closeDialog'> 
            <Stockdetail :fid="stockid"></Stockdetail>
        </el-dialog>
    </div>
     <!-- 供应商详情弹框 -->
     <el-dialog :visible.sync="openSupplier" width="1500px" append-to-body>
            <Supplierdetail :fid="result.partnerId"></Supplierdetail>
        </el-dialog>
    </div>
</template>
<script>
import { getPickingDetail,getPicking,receive } from "@/api/system/picking";
export default {
    data() {
        return {
             // 供应商详情弹框
             openSupplier: false,
            // 是否显示弹框，用来解决第二次弹框组件内容没变化的问题
           showStockCD:true,
            // 传给库存详情页的id
            stockid: null,
            // 库存详情弹框
            openStock: false,
             // 列表描述单元格的样式
             CS: {
                //   'text-align': 'center',  //文本居中
                'max-width': '280px',   //最小宽度
                'word-break': 'break-all'  //过长时自动换行
            },
            tableForm:{
                tableData: []
            },
            result: {},
            rules: {
                num: [
                    { required: true, message: "必须为数字值", trigger: ["blur"] },
                    { pattern: /^[+]{0,1}(\d+)$/, message: '必须为数字值', trigger: ["blur"] }
                ]
            }
            // result2: {}
        };
    },
    mounted() {
        // 通过$route.query将传过来的值接收;
        let id = this.$route.query.listId;
        // this.tableForm.tableData = this.$route.query.manageList;
        this.getList(id);
    },
    methods: {
        req(h, colunm) {
            // console.log(h);
            // console.log(colunm);
            // console.log(colunm.column.label);
            return [
                h('span', { style: 'color:#f56c6c' }, '*'),
                h('span', ' ' + colunm.column.label)
            ]

        },
        // 列表详情
        getList(id) {
           
            getPicking(id).then(res => {
                // console.log(res);
                this.result = res.data
                this.tableForm.tableData = res.data.stockMoveList
                // this.tableForm = res.data
                // console.log( this.tableForm);
            })
        },
        //收货按钮
        Shipment(row) {
            const id=row.id
            this.$prompt('请输入收货数量', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[+]{0,1}(\d+)$/,
          inputErrorMessage: '只能输入正整数'
            }).then(({ value }) => {
                const que = {
                    id: id,
                    num:value             
                }
                receive(que).then(res => {
                    // console.log(res);
                    let id = this.$route.query.listId;
        // this.tableForm.tableData = this.$route.query.manageList;
        this.getList(id);
                })
            
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
        },
        submit() { 
            Object.assign(this.tableForm, this.result);
            this.tableForm.stockMoveList=this.tableForm.tableData
        //    console.log(this.tableForm.tableData);
            // console.log(this.tableForm);
            this.$refs["tableForm"].validate((valid) => {
                // console.log(valid);
                if (valid) {
                    // console.log("11111");
                    receive(this.tableForm).then(res => {
                        // console.log(res);
                    })
                }
            })
        },
         // 点击产品名称弹出详情
         stockdetail(row) {
            //  console.log(row)
            
            this.showStockCD=true
            this.stockid = row.productTemplateId
            this.openStock = true
           
        },
         // 关闭弹框的时候销毁内容  再次点击重新创建
         closeDialog() {
             this.showStockCD=false
        },
          // 点击供应商名称弹出详情
          alertSupplier() {
            this.openSupplier = true
        },

    },
    components: {
        Supplierdetail: () => import('@/views/system/supplierdetail/index.vue'),
        Stockdetail: () => import('@/views/system/stockdetail/index.vue')
    },
    props: {},
    watch: {},
    computed: {},
    created() { },
};
</script>
<style lang="scss"  scoped>
// @import "~@/assets/styles/detail.scss";
.index {
    // background: #f9f9f9;
    border: 1px transparent solid;


}
.sub {
    // width: 80%;
    // border: 1px red solid;
    text-align: center;
    margin-bottom: 20px;

}
.thRed {
    // height: 200px;
    margin-top: 22px;
}.product {
    width: 80%;
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
}
.detail {
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
    width: 80%;

    .tab {
        width: 90%;
        margin: 20px auto;
    }

}

h2 {
    text-align: center;
}


// .detail {
//     margin: 30px auto;
//     width: 80%;
//     .tab {
//         width: 80%;
//         margin: 20px auto;
//     }

// }

// .my-content {
//     background: #1f1e1e;
// }


// ::v-deep .el-descriptions-item__label.is-bordered-label {
//     font-weight: bold;
//     color: #6d6a6a;
//     background: #fdfcfc;
// }
</style>